import React, { Component } from 'react';

//加载组件
import { Spin, Alert, Pagination } from 'antd';
//导入fetchjsonp
import fetchJSONP from 'fetch-jsonp';
//导入电影列表组件
import MovieItem from './MovieItem.jsx';

class MovieList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            movies: [],
            nowPage: parseInt(props.match.params.page) || 1,
            pageSize: 12,
            total: 0,
            isLoading: true,
            movieType: props.match.params.type, //要获取的电影的类型
          }
    }
    //WARNING! To be deprecated in React v17. Use componentDidMount instead.
    componentWillMount() {
        this.loadMovieListByTypeAndPage();
        setInterval(()=>{
            this.setState({
                isLoading:false
            })
        },3000)
    }
    //组件将要接收新属性
    componentWillReceiveProps(nextProps){
        console.log(nextProps.match)
        //每当地址栏变化的时候,重置 state 中的参数项, 然后再发起请求
        this.setState({
            isLoading: true,
            nowPage: parseInt(nextProps.match.params.page)||1,
            movieType:nextProps.match.params.type,
        }, function(){
            this.loadMovieListByTypeAndPage();
        })
    }

    render() { 
        return ( <div>
            {this.renderList()}
        </div> );
    }

    loadMovieListByTypeAndPage = ()=>{
        //默认的 window.fetch 受到跨域限制,无法直接使用,可以使用第三方 fetch-jsonp
        const start = this.state.pageSize*(this.state.nowPage - 1)
        const url = `https://api.douban.com/v2/movie/${this.state.movieType}?start=${start}&count=${this.state.pageSize}`
        fetchJSONP(url)
            .then(response => response.json())
            .then(data=>{
                this.setState({
                    isLoading: false,
                    movies: data.subjects,
                    total: data.total
                })
            })

        // const data =require('../test_data/'+this.state.movieType+'.json')
        // setTimeout(()=>{
        //     this.setState({
        //             isLoading: false,
        //             movies: data.subjects,
        //             total: data.total
        //         })
        // },1000)

    }
    renderList = ()=>{
        if(this.state.isLoading){
            return (<Spin tip="Loading...">
                <Alert
                message="正在请求电影列表"
                description="精彩内容马上程现"
                type="info"
                />
             </Spin>
            )
        }else {
            return (
                <div>
                    <div style={{display:'flex', flexWrap:'wrap'}}>
                { this.state.movies.map(item => {
                    return <MovieItem {...item} key={item.id} history={this.props.history} ></MovieItem>
                })}
                    </div>
                    <Pagination defaultCurrent={this.state.nowPage} total={this.state.total} pageSize={this.state.pageSize} onChange={this.pageChanged}/>
                </div>
            )
        }
    }
    //当页码改变的时候,加载新一页的数据
    pageChanged = (page)=>{
        //这种手动使用BOM对象,实现跳转,这样不好,可以使用编程式导航
        //window.location.href = '/#/movie/'+ this.state.movieType + '/'+page;

        this.props.history.push('/movie/'+ this.state.movieType + '/'+page)
    }
}
 
export default MovieList;